<template>
  <svg aria-hidden="true" :class="className" :style="style">
    <use :href="'#' + name" :fill="fill" />
  </svg>
</template>

<script lang="ts" setup>
  defineProps({
    name: {
      type: String,
      required: true,
    },
    fill: {
      type: String,
      default: 'currentColor',
    },
    className: {
      type: String,
      default: 'hv-svg-icon',
    },
    style: {
      type: Object,
      default: () => {},
    },
  });
</script>

<style lang="less" scoped>
  .hv-svg-icon {
    width: 1em;
    height: 1em;
  }
</style>
